﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>测试页</title>
    <meta charset="utf-8" />
</head>
<body>
    <div id="content">

    </div>

    <script src="/scripts/jquery-3.1.1.min.js"></script>
    <script>
        function func() {
            console.log(1);
        }
        var data = {
            fields: [
                { name: "id", index: true, label: "ID", ctrltype: "text", style: [{ width: 10 }, ] , "class": "rows "},
                { name: "name", index: true, label: "姓名", ctrltype: "text" },
                { name: "sex", index: true, label: "性别", ctrltype: "select", data: [{ value: "M", text: "男" }, { value: "W", text: "女" }], defaultvalue: "W", func: func },
                { name: "address", index: true, label: "地址", ctrltype: "text" },
                { name: "email", index: true, label: "电邮", ctrltype: "text" },
                { name: "desc", index: true, label: "简介", ctrltype: "textarea" }
            ],
            id: "id",
            data: { id: "1", name: "小沈阳" },
            control: [{}, {}]
        }

        var ctrls = [];
        for (var i = 0; i < data.fields.length; i++) {
            var field = data.fields[i];
            var label = $("<label />").text(field.label);
            ctrls.push(label);
            switch (field["ctrltype"]) {
                case "text":
                    var input = $("<input type='text'/>").attr("id", field.name);
                    ctrls.push(input);
                    break;
                case "select":
                    var select = $("<select />").attr("id", field.name);
                    for (var i = 0; i < field.data.length; i++) {
                        var fdata = field.data[i];
                        $(select).append($("<option />").attr("value", fdata.value).text(fdata.text));
                        $(select).val(field.defaultvalue)
                    }
                    ctrls.push(select);
                    field.func();
                    break;
                case "textarea":
                    var input = $("<textarea />").attr("id", field.name);
                    ctrls.push(input);
                    break;
            }
        }
        for (var i = 0; i < ctrls.length; i++) {
            var ctrl = ctrls[i];
            $("#content").append($(ctrl));
        }

        for (var i in data.data) {
            var d = data.data[i];
            $("#content #" + i).val(d);
        }

    </script>
</body>
</html>
